<template>
  <div class="silde_box" v-if="flag">
    <slide-verify
      class="silde_box"
      ref="block"
      slider-text="向右滑动->"
      :accuracy="1"
      @again="onAgain"
      @success="onSuccess"
      @fail="onFail"
      @refresh="onRefresh"
      :imgs="img"
    ></slide-verify>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import SlideVerify, { SlideVerifyInstance } from "vue3-slide-verify"; //引入滑动验证组件
import "vue3-slide-verify/dist/style.css"; //引入滑动验证组件样式

const msg = ref("");
const flag = ref(true);
//自定义图片
const img = ref([
  "https://img0.baidu.com/it/u=1552632757,378376738&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281",
  "https://img2.baidu.com/it/u=4260616497,4153321689&fm=253&fmt=auto&app=138&f=JPEG?w=656&h=435",
]);
const block = ref<SlideVerifyInstance>();

const onAgain = () => {
  block.value?.refresh();
};
//成功的回调
const onSuccess = (times: number) => {
  flag.value = false;
};
//失败的回调
const onFail = () => {
  ElMessage.success("验证不通过");
};
//点击刷新回调
const onRefresh = () => {
  ElMessage.success("刷新了验证码");
};

const handleClick = () => {
  // 刷新
  block.value?.refresh();
};
</script>
<style scoped>
.silde_box {
  margin: -235px 2px;
}
</style>